import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Typography } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { login } from '../store/authSlice';

const { Title } = Typography;

const Login = () => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { isAuthenticated } = useSelector((state) => state.auth);

  // 如果已经登录，直接跳转到首页
  useEffect(() => {
    if (isAuthenticated) {
      navigate('/');
    }
  }, [isAuthenticated, navigate]);

  // 处理登录表单提交
  const handleLogin = async (values) => {
    setLoading(true);
    try {
      await dispatch(login(values)).unwrap();
      message.success('登录成功');
      navigate('/');
    } catch (error) {
      message.error(error.message || '登录失败，请检查用户名和密码');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={styles.container}>
      <div style={styles.card}>
        <Card title="营销中心管理系统" style={styles.cardStyle}>
          <Title level={4} style={styles.title}>登录</Title>
          <Form
            form={form}
            name="login"
            layout="vertical"
            initialValues={{
              username: 'admin',
              password: 'admin123',
            }}
            onFinish={handleLogin}
            style={styles.form}
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[
                { required: true, message: '请输入用户名' },
                { min: 2, message: '用户名至少为2个字符' },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />
                placeholder="请输入用户名"
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="password"
              label="密码"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码至少为6个字符' },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />
                type="password"
                placeholder="请输入密码"
                size="large"
              />
            </Form.Item>
            
            <Form.Item style={styles.buttonGroup}>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                loading={loading}
                style={styles.loginButton}
              >
                登录
              </Button>
            </Form.Item>
            
            <div style={styles.tips}>
              <p><strong>提示：</strong></p>
              <p>管理员账号：admin / admin123</p>
              <p>普通用户：user / user123</p>
            </div>
          </Form>
        </Card>
      </div>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    background: '#f0f2f5',
  },
  card: {
    width: '100%',
    maxWidth: 400,
  },
  cardStyle: {
    borderRadius: 8,
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
  },
  title: {
    textAlign: 'center',
    marginBottom: 24,
    color: '#1890ff',
  },
  form: {
    padding: '0 24px',
  },
  buttonGroup: {
    marginTop: 24,
  },
  loginButton: {
    width: '100%',
  },
  tips: {
    marginTop: 16,
    padding: '12px',
    background: '#f6ffed',
    border: '1px solid #b7eb8f',
    borderRadius: 4,
    fontSize: '12px',
    color: '#52c41a',
  },
};

export default Login;